<ngb-alert #successAlert *ngIf="successMessage" type="success" (closed)="successMessage=''">
  <div class="text-center"><b>Success! </b> <span class="text-center">{{successMessage}}</span></div>
</ngb-alert>
<div class="container" *ngFor="let group of telemetryResponse?.groups  ">
  <div class="card my-3">
    <div class="card-body">
      <h3>Group Id: {{ group.groupId }}</h3>
      <div *ngFor="let consumer of group.consumers">
        <h4>Consumer: {{ consumer.name }}</h4>
        <h4>Status: <span [ngClass]="{
                  'text-success': $any(consumer).status === 'Running',
                  'text-warning': $any(consumer).status === 'Paused',
                  'text-danger': $any(consumer).status === 'Not Running'
                  }">{{$any(consumer).status}}</span>
          <button class="btn btn-sm btn-outline-success ml-2" type="button" (click)="openStartModal(group.groupId, consumer.name)" *ngIf="$any(consumer).status === 'Not Running'">Start</button>
          <button class="btn btn-sm btn-outline-warning ml-2" type="button" (click)="openStopModal(group.groupId, consumer.name)" *ngIf="$any(consumer).status === 'Running'">Stop</button>
          <button class="btn btn-sm btn-outline-warning ml-2" type="button" (click)="openRestartModal(group.groupId, consumer.name)" *ngIf="$any(consumer).status === 'Running'">Restart</button>
          <button class="btn btn-sm btn-outline-success ml-3" type="button" (click)="openWorkersCountModal(group.groupId, consumer.name)" *ngIf="$any(consumer).status === 'Running'">Force number of workers</button>
        </h4>
        <h4>Lag: {{$any(consumer).lag}}</h4>
        <ng-template let-assignment ngFor [ngForOf]="consumer.assignments || [] | groupBy:'topicName'">
          <hr/>
          <h5>
            Topic: {{assignment.key}}
            <button class="btn btn-sm btn-outline-success ml-2" type="button" (click)="openResumeModal(group.groupId, consumer.name, assignment.key)" *ngIf="assignment.value.some(hasPausedPartition)">Resume</button>
            <button class="btn btn-sm btn-outline-warning ml-2" type="button" (click)="openPauseModal(group.groupId, consumer.name, assignment.key)" *ngIf="assignment.value.some(hasRunningPartition)">Pause</button>
            <button class="btn btn-sm btn-outline-info ml-2" type="button" (click)="openRewindModal(group.groupId, consumer.name, assignment.key)" *ngIf="$any(consumer).status === 'Running'">Rewind Offset</button>
            <button class="btn btn-sm btn-outline-secondary ml-2" type="button" (click)="openResetModal(group.groupId, consumer.name, assignment.key)" *ngIf="$any(consumer).status === 'Running'">Reset Offset</button>
          </h5>
          <table class="table table-striped table-hover mt-1">
            <thead>
            <tr>
              <th>Consumer instance</th>
              <th>Workers</th>
              <th>Partitions</th>
              <th>Lag</th>
              <th>Status</th>
              <th>LastUpdate</th>
            </tr>
            </thead>
            <tbody>
              <ng-template let-partitionAssignment ngFor [ngForOf]="assignment.value | sort:'instanceName'">
                <tr>
                  <td class="text-left">{{partitionAssignment.instanceName}}</td>
                  <td class="text-left">{{partitionAssignment.workers}}</td>
                  <td class="text-left">{{hasRunningPartition(partitionAssignment) ? partitionAssignment.runningPartitions : partitionAssignment.pausedPartitions}}</td>
                  <td class="text-left">{{partitionAssignment.lag}}</td>
                  <td class="text-left">
                    <div *ngIf="partitionAssignment.isLost;then consumer_lost else consumer_on"></div>
                    <ng-template #consumer_lost><span>Offline</span></ng-template>
                    <ng-template #consumer_on>
                      <ng-template [ngIf]="hasPausedPartition(partitionAssignment)">
                        <span class="font-weight-bold text-warning">Paused</span>
                      </ng-template>
                      <ng-template [ngIf]="hasRunningPartition(partitionAssignment)">
                        <span class="font-weight-bold text-success">Running</span>
                      </ng-template>
                    </ng-template>
                  </td>
                  <td class="text-left"><span [ngClass]="partitionAssignment.isLost ? 'text-secondary' : 'text-success'">{{partitionAssignment.lastUpdate+'Z' | date: "medium"}}</span></td>
                </tr>
              </ng-template>
            </tbody>
          </table>
        </ng-template>
        <hr />
      </div>
    </div>
  </div>
</div>
